<template>
  <div class="channel-nav">
    <div class="channel-nav__left">
      <div class="channel-nav__logo"/>
      <span class="channel-nav__title" :style="{ color: `#ff61b5` }" >{{title}}</span>
    </div>
    <div class="channel-nav__right">
      <slot name="channel-nav-expand"></slot>
      <icon-button :lineClass="{'channel-nav__right__min': true}" :title="`最小化`" :onClick="onMinimize" />
      <icon-button :lineClass="{'channel-nav__right__max': true}" v-show="!restoreState" :title="`最大化`" :onClick="onMaximize"  />
      <icon-button :lineClass="{'channel-nav__right__restore': true}" v-show="restoreState" :title="`恢复`" :onClick="onRestore" />
      <icon-button :lineClass="{'channel-nav__right__close': true}" :title="`关闭`" :onClick="onClose" />
    </div>
  </div>
</template>

<script>
import IconButton from '@/component/base/icon-button'
import { Channels } from '@/common/'

export default {
  name: 'channel-nav',
  props: [
  ],
  components: {
    IconButton
  },
  computed: {
  },
  data () {
    return {
      title: '频道窗口',
      restoreState: false
    }
  },
  mounted () {
    this.start()
  },
  methods: {
    start () {
      const info = Channels.impl().treeInfo()
      info && info.sid && (this.title = `${info.sid.strName} ID ${info.sid.dwSid}`)
    },
    onMinimize () {
      if (!this.useForStaticPage) {
        Channels.impl().minimize()
      } else {
        (typeof window.Win !== 'undefined') && window.Win.minimize()
      }
    },
    onMaximize () {
      this.restoreState = true
      if (!this.useForStaticPage) {
        Channels.impl().maximize()
      } else {
        (typeof window.Win !== 'undefined') && window.Win.maximize()
      }
    },
    onRestore () {
      this.restoreState = false
      if (!this.useForStaticPage) {
        Channels.impl().restore()
      } else {
        (typeof window.Win !== 'undefined') && window.Win.restore()
      }
    },
    onClose () {
      Channels.impl().closeWindow()
    },
    onWindowResize () {
      var isMax = (window.innerWidth === window.screen.width) &&
        (window.innerHeight === window.screen.availHeight)
      this.restoreState = isMax
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/lib/mixin";
@import "~@/css/common/variables";

.channel-nav {
  width: 100%;
  height: $channel-bar-height;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e3e3e3;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: #62C9F4;
  &__left, &__right {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-left: 7px;
  }
  &__left {
    flex-shrink: 0;
  }
  &__logo {
    width: 23px;
    height: 23px;
    background: url(~@/img/logo.png);
    margin-right: 9px;
  }
  &__title {
    display: block;
    padding-top: 3px;
    font-size: 14px;
    line-height: 23px;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  &__right {
    width: auto;
    height: 12px;
    justify-content: flex-end;
    flex-shrink: 1;
    &__min, &__close, &__max, &__restore {
      display: block;
      width: 12px;
      height: 12px;
      cursor: pointer;
      overflow: hidden;
      margin-right: 15px;
    }
    &__min {
      background: url(~@/img/min_normal.png) no-repeat center;
      &:hover{
        background: url(~@/img/min_hover.png) no-repeat center;
      }
      &:active{
        background: url(~@/img/min_press.png) no-repeat center;
      }
    }
    &__max {
      background: url(~@/img/max_normal.png) no-repeat center;
      &:hover{
        background: url(~@/img/max_hover.png) no-repeat center;
      }
      &:active{
        background: url(~@/img/max_press.png) no-repeat center;
      }
    }
    &__restore {
      background: url(~@/img/restore_normal.png) no-repeat center;
      &:hover{
        background: url(~@/img/restore_hover.png) no-repeat center;
      }
      &:active{
        background: url(~@/img/restore_press.png) no-repeat center;
      }
    }
    &__close {
      background: url(~@/img/close_normal.png) no-repeat center;
      &:hover{
        background: url(~@/img/close_hover.png) no-repeat center;
      }
      &:active{
        background: url(~@/img/close_press.png) no-repeat center;
      }
    }
  }
}
</style>
